<template>
	<!-- 美发店铺 -->
	<view>
		<view class="head ">
			<view  class="item flex bg-white" @click="handlelist(item)">
				<image src="/static/矩形 29.png" mode=""></image>
				<view class="text_div">
						<view class="food_name flex justify-between">
							<text class="align-end flex">荣福居黄焖鸡米饭</text>
							<text class="state align-start flex" :class="{state1:index%2 == 0}">营业中</text>
						</view>
						<view class="score">
								<text class="cuIcon-favorfill"></text>
								<text class="num">4.6</text>
								<text class="time">营业时间：10:00</text>
						</view>
						<view class="phone">联系电话：12345678901</view>
						<view class="address">地址：贵州省贵阳市花果园金融街5号2...</view>
				</view>
			</view>
		</view>
		<view class="food_list">
			<view v-for="(item,index) in 6" :key="index" class="food_list_item bg-white flex" >
					<image src="/static/矩形 29.png" mode=""></image>
					<view class="text_div">
						<view class="food_name">小份黄焖鸡+米饭+土豆</view>
						<view class="price">
							<text>原价￥109.00</text>
							<text class="vipPrice">会员价:￥89.00</text>
						</view>
						<text class="jifen">积分最多抵扣：￥20</text>
						<view class="food_num">库存：1235</view>
					</view>
			</view>
		</view>
	<!-- 	<view class="image_div">
			<image src="/static/icon_gwc.png" mode=""></image>
			<view class="icon flex-c">2</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.head{
	.item{
		width: 710rpx;
		border-radius: 10rpx;
		padding:24rpx 20rpx;
		margin: 10rpx auto;
		image{
			width: 208rpx;height: 208rpx;border-radius: 10rpx;
		}
		.text_div{
			margin-left: 14rpx;
			.food_name{
				height: 55rpx;
				font-size: 32rpx;
				color: #333;
				.state{
					color: #1CD699;
				}
				.state1{
					color: #999999;
				}
			}
			.score{
				margin-top: 8rpx;
				margin-bottom: 14rpx;
				text{
					color: #FF6F10;
				}
				.cuIcon-favorfill,.num{
					font-size: 26rpx;
				}
			}
			.phone,.address{
				font-size: 24rpx;
				color: #999999;
			}
			.address{
				margin-top: 20rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
}
.food_list{
	padding:0 20rpx ;
	.food_list_item{
		padding:24rpx 20rpx;
		height: 222rpx;
		margin-bottom: 10rpx;
		border-radius: 10rpx;
			.text_div{
				.food_name{
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				.food_num{
					font-size: 24rpx;color: #999999;
					padding-top: 9rpx;
				}
				.price{
					font-size: 28rpx;
					color: #333;
					margin-top: 8rpx;
					margin-bottom: 10rpx;
				}
				.vipPrice{
					color: #FF2E2E;
					margin-left: 20rpx;
				}
				.jifen{
					font-size: 24rpx;
					color: #FF6F10;
				}
			}
		image{
			width: 180rpx;height: 180rpx;
			border-radius: 10rpx;
			margin-left: 5rpx;
			margin-right: 14rpx;
		}
	}
}
.image_div{
	position: fixed;
	right: 39rpx;
	bottom: 36rpx;
	image{
		width: 100rpx;height: 100rpx;
	}
	.icon{
		width: 30rpx;height: 30rpx;
		background: #FF6F10;
		border-radius: 50%;
		color: #fff;
		font-size: 22rpx;
		position: absolute;
		right: -10rpx;
		bottom: 50rpx;
	}
}
</style>
